/**
 * @Title: index.js
 * @Description: index 任务详情
 * @author: Fanchao
 * @date: 2020/8/2 2:08 下午
 * @version V1.0
 */
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import SectionTitle from 'components/SectionTitle';
import { connect, history } from 'umi';
import DetailTop from '@/pages/my-tasks/[id]/components/detail-top';
import TableFormTeacher from '@/pages/my-tasks/[id]/components/table-form-teacher';
import TableFormStudent from '@/pages/my-tasks/[id]/components/table-form-student';
import { Select, Form, Input, Row, Col, message } from 'antd';
import ExpertCheckCourseInfo from '@/pages/my-tasks/[id]/components/expertCheckCourseInfo';
import { getExpertUserModelList } from 'api/index';
import storageUtils from 'utils/storage';

const { Option } = Select;
const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
};

const TaskDetail = ({ myTaskDetail: { evaluateExamItemId, taskStartTime, taskEndTime, evaluateObjectModel, evaluatePlanSnapshotsModel, questionSnapshotsModelList, initExamItemAnswerDetailMsgList, expertCheckCourseInfo, evaluateTaskType, showBtn }, dispatch, loading }) => {
    const isStudent = storageUtils.getUser().userRoleTypes.includes('Student');
    if (loading) return null;
    const [formBase] = Form.useForm();
    const [twoShow, setTwoShow] = useState(false);
    const [expertTeacherListOption, setExpertTeacherListOption] = useState([]);
    const fetchTeacherListOption = async () => {
        const result = await getExpertUserModelList();
        if (result.status === 'success') {
            const expertTeacherListOption = result.result;
            setExpertTeacherListOption(expertTeacherListOption);
        } else {
            message.error(result.message);
        }
    };
    useEffect(() => {
        if (!isStudent) {
            fetchTeacherListOption();
        }
    }, []);
    return (
        <div className={styles.taskDetailContainer}>
            <SectionTitle title={'评定对象'}/>
            <DetailTop
                taskStartTime={taskStartTime}
                taskEndTime={taskEndTime}
                evaluateObjectModel={evaluateObjectModel}
            />
            {
                (evaluateTaskType === 'school_expert' || evaluateTaskType === 'center_expert') ? (<SectionTitle title={'听查课情况'}/>) : null
            }
            {
                (evaluateTaskType === 'school_expert' || evaluateTaskType === 'center_expert') ? showBtn ? (
                    <Form
                        {...layout}
                        layout="horizontal"
                        form={formBase}
                        name={'expertCheckCourseInfo'}
                        initialValues={{
                            manyTeacherEvaluate: '0',
                        }}
                    >
                        <Row>
                            <Col span={6}>
                                <Form.Item
                                    label="听查课时间"
                                    name="checkCourseTime"
                                    rules={[{ required: true, message: '必填' }]}
                                >
                                    <Input placeholder="请输入听查课时间"/>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item
                                    label="上课地点"
                                    name="checkCoursePlace"
                                    rules={[{ required: true, message: '必填' }]}
                                >
                                    <Input placeholder="请输入上课地点"/>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item
                                    label="上课题目"
                                    name="checkCourseTopic"
                                    rules={[{ required: true, message: '必填' }]}
                                >
                                    <Input placeholder="请输入上课题目"/>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item
                                    label="上课节次"
                                    name="checkCourseSection"
                                    rules={[{ required: true, message: '必填' }]}
                                >
                                    <Select placeholder="请选择上课节次">
                                        <Option value="1">1</Option>
                                        <Option value="2">2</Option>
                                        <Option value="3">3</Option>
                                        <Option value="4">4</Option>
                                        <Option value="5">5</Option>
                                        <Option value="6">6</Option>
                                        <Option value="7">7</Option>
                                        <Option value="8">8</Option>
                                        <Option value="9">9</Option>
                                        <Option value="10">10</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item
                                    label="是否两人"
                                    name="manyTeacherEvaluate"
                                    rules={[{ required: true, message: '必填' }]}
                                >
                                    <Select
                                        placeholder="是否为免评对象"
                                        onChange={(e) => {
                                            setTwoShow(e === '1' ? true : false);
                                        }}
                                    >
                                        <Option value="1">是</Option>
                                        <Option value="0">否</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            {
                                twoShow ? (
                                    <Col span={6}>
                                        <Form.Item
                                            label="教员"
                                            name="partnerExpertUserId"
                                            rules={[{ required: true, message: '必填' }]}
                                        >
                                            <Select
                                                mode="multiple"
                                                placeholder="请选教员"
                                            >
                                                {
                                                    expertTeacherListOption.map(item => {
                                                        return (
                                                            <Option
                                                                key={item.expertUserId}
                                                                value={item.expertUserId}
                                                            >
                                                                {item.expertRealName}
                                                            </Option>
                                                        );
                                                    })
                                                }
                                            </Select>
                                        </Form.Item>
                                    </Col>
                                ) : null
                            }
                        </Row>
                    </Form>
                ) : (
                    <ExpertCheckCourseInfo expertCheckCourseInfo={expertCheckCourseInfo}/>
                ) : null
            }

            <SectionTitle title={
                `评价任务${(evaluateTaskType === 'school_expert' || evaluateTaskType === 'center_expert') ? '--分数' + evaluateObjectModel.expertScore : ''}`
            }/>
            <div className={styles.submitFormContainer}>
                {
                    (evaluateTaskType === 'school_expert' || evaluateTaskType === 'center_expert') ? (
                        <TableFormTeacher
                            evaluateExamItemId={evaluateExamItemId}
                            questionSnapshotsModelList={questionSnapshotsModelList}
                            evaluatePlanSnapshotsModel={evaluatePlanSnapshotsModel}
                            initExamItemAnswerDetailMsgList={initExamItemAnswerDetailMsgList}
                            evaluateTaskType={evaluateTaskType}
                            showBtn={showBtn}
                            dispatch={dispatch}
                            history={history}
                            formBase={formBase}
                        />
                    ) : (
                        <TableFormStudent
                            evaluateExamItemId={evaluateExamItemId}
                            questionSnapshotsModelList={questionSnapshotsModelList}
                            evaluatePlanSnapshotsModel={evaluatePlanSnapshotsModel}
                            initExamItemAnswerDetailMsgList={initExamItemAnswerDetailMsgList}
                            evaluateTaskType={evaluateTaskType}
                            showBtn={showBtn}
                            dispatch={dispatch}
                            history={history}
                        />
                    )
                }
            </div>
        </div>
    );
};
export default connect(({ myTaskDetail, dispatch, loading }) => ({
    myTaskDetail,
    dispatch,
    loading: loading.effects['myTaskDetail/getDetailData'],
}))(TaskDetail);
